import React from 'react';
import { ComponentMeta } from '@storybook/react';

import Menu from './menu';
import MenuItem from './menuItem';
import SubMenu from './subMenu';

export default {
  title: 'Components/Menu',
  component: Menu,

} as ComponentMeta<typeof Menu>;

export const menu = () => {

  const handleSelected = (index: any) => {
    console.log('selected item index:', index);
  };

  return (
    <>
      <Menu onSelect={handleSelected}>
        <MenuItem>
          item1
        </MenuItem>
        <MenuItem>
          item2
        </MenuItem>
        <MenuItem>
          item3
        </MenuItem>
      </Menu>
    </>
  );
};

/**
 * submenu
 * @returns 
 */
export const menuWithSubmenu = () => {

  const handleSelected = (index: any) => {
    console.log('selected item index:', index);
  };

  return (
    <>
      <Menu defaultIndex='1-0' onSelect={handleSelected}>
        <MenuItem>
          item1
        </MenuItem>
        <SubMenu title="submenu">
          <MenuItem>
            item4
          </MenuItem>
          <MenuItem>
            item5
          </MenuItem>
        </SubMenu>
        <MenuItem>
          item2
        </MenuItem>
        <MenuItem>
          item3
        </MenuItem>
      </Menu>
    </>
  );
};

/**
 * 默认选中项
 * @returns 
 */
export const menuWithDefaultIndex = () => {

  const handleSelected = (index: any) => {
    console.log('selected item index:', index);
  };

  return (
    <>
      <Menu defaultIndex='2' onSelect={handleSelected}>
        <MenuItem>
          item1
        </MenuItem>
        <SubMenu title="submenu">
          <MenuItem>
            item4
          </MenuItem>
          <MenuItem>
            item5
          </MenuItem>
        </SubMenu>
        <MenuItem>
          item2
        </MenuItem>
      </Menu>
      <br />
      <Menu defaultIndex='1-1'>
        <MenuItem>
          item1
        </MenuItem>
        <SubMenu title="submenu">
          <MenuItem>
            item4
          </MenuItem>
          <MenuItem>
            item5
          </MenuItem>
        </SubMenu>
        <MenuItem>
          item2
        </MenuItem>
      </Menu>
    </>
  );
};

/**
 * 纵向标签
 * @returns 
 */
 export const verticalMenu = () => {

  const handleSelected = (index: any) => {
    console.log('selected item index:', index);
  };

  return (
    <>
      <Menu mode='vertical' defaultOpenKeys={['1']} onSelect={handleSelected}>
        <MenuItem>
          item1
        </MenuItem>
        <SubMenu title="submenu">
          <MenuItem>
            item4
          </MenuItem>
          <MenuItem>
            item5
          </MenuItem>
        </SubMenu>
        <MenuItem>
          item2
        </MenuItem>
        <MenuItem>
          item3
        </MenuItem>
      </Menu>
    </>
  );
};